<div class="content-section introduction">
    <div class="feature-intro">
        <h1>OverlayPanel</h1>
        <p>OverlayPanel is a container component positioned as connected to its target.</p>
    </div>
</div>

<div class="content-section implementation">
    <div class="card">
        <p-toast></p-toast>

        <p-button [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" icon="pi pi-search" (click)="op.toggle($event)"></p-button>

        <p-overlayPanel #op [showCloseIcon]="true" [style]="{width: '450px'}">
            <ng-template pTemplate>
                <p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="5">
                    <ng-template pTemplate="header">
                        <tr>
                            <th pSortableColumn="name">Name<p-sortIcon field="name"></p-sortIcon></th>
                            <th>Image</th>
                            <th pSortableColumn="price">Price <p-sortIcon field="price"></p-sortIcon></th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-rowData let-product>
                        <tr [pSelectableRow]="rowData">
                            <td>{{product.name}}</td>
                            <td><img src="assets/showcase/images/demo/product/{{product.image}}" [alt]="product.image" class="product-image" /></td>
                            <td>{{product.price}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </ng-template>
        </p-overlayPanel>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;OverlayPanelModule&#125; from 'primeng/overlaypanel';
</app-code>

            <h5>Getting Started</h5>
            <p>Content is defined with an ng-template and overlay is displayed using the <i>show</i> or <i>toggle</i> method of a local ng-template variable.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-overlayPanel #op&gt;
    &lt;ng-template pTemplate&gt;
        Content
    &lt;/ng-template&gt;
&lt;/p-overlayPanel&gt;

&lt;button type="text" pButton label="Basic" (click)="op.toggle($event)"&gt;&lt;/button&gt;
</app-code>
            <h5>Show and Hide</h5>
            <p><i>show</i> method takes two parameters, first one is the event and it is mandatory. By default the target component to align the overlay is the event target, 
            if you'd like to align it to another element, provide it as the second parameter. Similarly calling <i>hide()</i> hides the overlay panel and the <i>toggle</i> method 
            toggles the visibility of the panel. In example below, clicking the button displays the overlayPanel aligned to the actualTarget div, not the button itself.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-overlayPanel #op&gt;
    &lt;ng-template pTemplate&gt;
        Content
    &lt;/ng-template&gt;
&lt;/p-overlayPanel&gt;

&lt;button type="text" pButton label="Custom Target" (click)="op.show($event, actualTarget)"&gt;&lt;/button&gt;
&lt;div #actualTarget&gt;&lt;/div&gt;
</app-code>
        
        
            <h5>Dismissable and CloseIcon</h5>
            <p>Clicking outside the overlay hides the panel, setting <i>dismissable</i> to false disables this behavior. Additionally enabling <i>showCloseIcon</i> property 
            displays a close icon at the top right corner to close the panel</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-overlayPanel #op [dismissable]="true" [showCloseIcon]="true"&gt;
    &lt;ng-template pTemplate&gt;
        Content
    &lt;/ng-template&gt;
&lt;/p-overlayPanel&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of the open and hide animations can be customized using the <i>showTransitionOptions</i> and <i>hideTransitionOptions</i> properties, 
                example below disables the animations altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-overlayPanel [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" #op [dismissable]="true" [showCloseIcon]="true"&gt;
    &lt;ng-template pTemplate&gt;
        Content
    &lt;/ng-template&gt;
&lt;/p-overlayPanel&gt;
</app-code>

            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>dismissable</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Enables to hide the overlay when outside is clicked.</td>
                        </tr>
                        <tr>
                            <td>showCloseIcon</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When enabled, displays a close icon at top right corner.</td>
                        </tr>
                        <tr>
                            <td>ariaCloseLabel</td>
                            <td>string</td>
                            <td>close</td>
                            <td>Aria label of the close icon.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the component.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the component.</td>
                        </tr>
                        <tr>
                            <td>appendTo</td>
                            <td>any</td>
                            <td>null</td>
                            <td>Target element to attach the panel, valid values are "body" or a local ng-template variable of another element (note: use binding with brackets for template variables, e.g. [appendTo]="mydiv" for a div element having #mydiv as variable name).</td>
                        </tr>
                        <tr>
                            <td>baseZIndex</td>
                            <td>number</td>
                            <td>0</td>
                            <td>Base zIndex value to use in layering.</td>
                        </tr>
                        <tr>
                            <td>autoZIndex</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>Whether to automatically manage layering.</td>
                        </tr>
                        <tr>
                            <td>showTransitionOptions</td>
                            <td>string</td>
                            <td>.12s cubic-bezier(0, 0, 0.2, 1)</td>
                            <td>Transition options of the show animation.</td>
                        </tr>
                        <tr>
                            <td>hideTransitionOptions</td>
                            <td>string</td>
                            <td>.1s linear</td>
                            <td>Transition options of the hide animation.</td>
                        </tr>
                        <tr>
                            <td>focusOnShow</td>
                            <td>boolean</td>
                            <td>true</td>
                            <td>When enabled, first button receives focus on show.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onShow</td>
                            <td>-</td>
                            <td>Callback to invoke when an overlay becomes visible.</td>
                        </tr>
                        <tr>
                            <td>onHide</td>
                            <td>-</td>
                            <td>Callback to invoke after overlay gets hidden.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Methods</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>toggle</td>
                            <td>event: browser event <br>
                                target?: target element to align the panel, defaults to event.target
                            </td>
                            <td>Toggles the visibility of the panel.</td>
                        </tr>
                        <tr>
                            <td>show</td>
                            <td>event: browser event <br>
                                target?: target element to align the panel to
                            </td>
                            <td>Displays the panel.</td>
                        </tr>
                        <tr>
                            <td>hide</td>
                            <td>-</td>
                            <td>Hides the panel.</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-overlaypanel</td>
                            <td>Container element.</td>
                        </tr>
                        <tr>
                            <td>p-overlaypanel-content</td>
                            <td>Content of the panel.</td>
                        </tr>
                        <tr>
                            <td>p-overlaypanel-close</td>
                            <td>Close icon.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/overlaypanel" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-overlaypanel-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-toast&gt;&lt;/p-toast&gt;

&lt;p-button [label]="selectedProduct ? selectedProduct.name : 'Select a Product'" icon="pi pi-search" (click)="op.toggle($event)"&gt;&lt;/p-button&gt;

&lt;p-overlayPanel #op [showCloseIcon]="true" [style]="&#123;width: '450px'&#125;"&gt;
    &lt;ng-template pTemplate&gt;
        &lt;p-table [value]="products" selectionMode="single" [(selection)]="selectedProduct" (onRowSelect)="onRowSelect($event)" [paginator]="true" [rows]="5"&gt;
            &lt;ng-template pTemplate="header"&gt;
                &lt;tr&gt;
                    &lt;th pSortableColumn="name"&gt;Name&lt;p-sortIcon field="name"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                    &lt;th&gt;Image&lt;/th&gt;
                    &lt;th pSortableColumn="price"&gt;Price &lt;p-sortIcon field="price"&gt;&lt;/p-sortIcon&gt;&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
            &lt;ng-template pTemplate="body" let-rowData let-product&gt;
                &lt;tr [pSelectableRow]="rowData"&gt;
                    &lt;td&gt;&#123;&#123;product.name&#125;&#125;&lt;/td&gt;
                    &lt;td&gt;&lt;img src="assets/showcase/images/demo/product/&#123;&#123;product.image&#125;&#125;" [alt]="product.image" class="product-image" /&gt;&lt;/td&gt;
                    &lt;td&gt;&#123;&#123;product.price&#125;&#125;&lt;/td&gt;
                &lt;/tr&gt;
            &lt;/ng-template&gt;
        &lt;/p-table&gt;
    &lt;/ng-template&gt;
&lt;/p-overlayPanel&gt;
</app-code>

<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
export class OverlayPanelDemo &#123;
    products: Product[];
    
    selectedProduct: Product;

    constructor(private productService: ProductService, private messageService: MessageService) &#123; &#125;

    ngOnInit() &#123;
        this.productService.getProductsSmall().then(products => this.products = products);
    &#125;

    onRowSelect(event) &#123;
        this.messageService.add(&#123;severity: 'info', summary: 'Product Selected', detail: event.data.name&#125;);
    &#125;
&#125;

</app-code>

<app-code lang="css" ngNonBindable ngPreserveWhitespaces>

button &#123;
    min-width: 15rem;
&#125;

.product-image &#123;
    width: 50px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
&#125;

&#125;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-overlaypanel-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>
